<template>
  <div class="cluster-container">
    <div class="cluster-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/clusterManage.png')"
      ></el-image>
      <div class="title">
        分区管理
        <div class="title-content">
          对指定集群内的节点进行精细化分区划分，并统一管理和协调这些分区，实现资源的有效隔离和优化利用
        </div>
      </div>
    </div>
    <div class="top-content">
      <div class="cluster-info">
        <div class="cluster-operate">
          <span class="keyword">关键词：</span>
          <el-input
            placeholder="请输入名称"
            v-model="searchInput"
            style="width: 20%"
            prefix-icon="el-icon-search"
            clearable
            @input="filterClusterList"
          >
          </el-input>

          <div class="right-menu">
            <!--                <el-button style="width: 100px;background:#304156;color: #fff;" type="primary" plain @click="refreshPage">刷新</el-button>-->
            <el-button
              type="primary"
              @click="uploadDialogVisible = true"
              class="el-button-primary-style"
              >添加
            </el-button>
          </div>
          <el-button
            v-if="isRowSelected"
            type="danger"
            @click="deleteSelectedRow"
            >删除
          </el-button>
        </div>
        <div class="cluster-table">
          <el-table
            ref="multipleTable"
            :data="filteredTableDate.length > 0 ? filteredTableDate : tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionPart"
            height="60vh"
          >
            <!--            :cell-style="{ textAlign: 'center' }"-->
            <!--            :header-cell-style="{ textAlign: 'center' }"-->
            <el-table-column
              type="selection"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column label="分区名" width="200">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.partitionZhname"
                  placement="bottom"
                  popper-class="myTooltipClass"
                >
                  <div class="descSpan">
                    {{ scope.row.partitionZhname }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="clusterName" label="集群" width="200">
            </el-table-column>
            <el-table-column label="节点" width="200">
              <template slot-scope="scope">
                <div>
                  <span
                    v-for="(host, index) in scope.row.partitionHosts"
                    :key="host.hostName"
                  >
                    <el-tooltip
                      effect="dark"
                      :content="host.hostIp"
                      placement="bottom"
                      popper-class="myTooltipClass"
                    >
                      <span>{{ host.hostName }}</span>
                    </el-tooltip>
                    <span v-if="index < scope.row.partitionHosts.length - 1"
                      >,
                    </span>
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="描述">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.partitionDescription"
                  placement="bottom"
                  popper-class="myTooltipClass"
                  :disabled="isShowTooltip"
                >
                  <div class="descSpan" @mouseover="onMouseOver($event)">
                    {{ scope.row.partitionDescription }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>

            <el-table-column label="创建时间" width="200">
              <template slot-scope="scope">
                {{ scope.row.updateTime }}
              </template>
            </el-table-column>

            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="padding: 0"
                  @click="editCluster(scope.row)"
                  >编辑</el-button
                >

                <el-popconfirm
                  title="此操作将永久删除该集群, 是否确认？"
                  @confirm="deleteCluster(scope.row)"
                >
                  <el-button
                    type="text"
                    slot="reference"
                    style="padding: 0; color: #f56c6c"
                  >
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 10px; float: right">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :total="page.total"
            :page-size="page.pageSize"
            :page.sync="page"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>

    <!-- 添加分区的弹窗显示 -->
    <div class="add-cluster">
      <el-drawer
        title="添加分区"
        :visible.sync="uploadDialogVisible"
        direction="rtl"
        :before-close="beforeCloseAddDialog"
        :close-on-press-escape="true"
        :wrapperClosable="false"
        :close-on-click-modal="false"
        size="50%"
      >
        <div style="margin-left: 30px">
          <el-form
            ref="uploadForm"
            :rules="rules"
            :model="uploadInfo"
            label-width="80px"
          >
            <div>
              <span
                style="font-size: 20px; font-weight: bold; margin-bottom: 10px"
                >基本信息</span
              >
              <el-form-item label="分区名称" prop="partitionZhname">
                <el-input
                  v-model="uploadInfo.partitionZhname"
                  placeholder="请输入长度小于24的字符串"
                  style="width: 300px"
                ></el-input>
              </el-form-item>

              <el-form-item label="分区描述" prop="partitionDescription">
                <el-input
                  v-model="uploadInfo.partitionDescription"
                  placeholder="请输入长度小于512的字符"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 2 }"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <span style="font-size: 20px; font-weight: bold">集群信息</span>
              <el-form-item label="所属集群" prop="clusterId">
                <el-select
                  v-model="uploadInfo.clusterId"
                  filterable
                  placeholder="请选择一个集群"
                  @change="selectClusterChange"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in allClusterData"
                    :key="item.id"
                    :label="item.clusterZhname"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <div v-show="uploadInfo.clusterId">
                  <!-- 使用 v-show 而不是 v-show="uploadInfo.clusterId !== ''" -->
                  <el-table
                    v-if="renderFlag"
                    :data="clusterNode"
                    style="width: 100%"
                    label="集群节点"
                    ref="table"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column
                      type="selection"
                      width="55"
                    ></el-table-column>
                    <el-table-column
                      prop="nodeName"
                      label="节点名称"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="nodeAddress"
                      label="节点IP"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="nodeRole"
                      label="节点类型"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="nodeStatus"
                      label="节点状态"
                      width="100"
                    ></el-table-column>
                    <el-table-column label="CPU(核)" width="100">
                      <template slot-scope="scope">
                        {{ scope.row.nodeCpuUsed }} /
                        {{ scope.row.nodeCpuTotal }}
                      </template>
                    </el-table-column>
                    <el-table-column label="内存(GB)" width="100">
                      <template slot-scope="scope">
                        {{ scope.row.nodeMemoryUsed }} /
                        {{ scope.row.nodeMemoryTotal }}
                      </template>
                    </el-table-column>
                    <el-table-column label="POD(个)" width="100">
                      <template slot-scope="scope">
                        {{ scope.row.nodeUsedPod }} / {{ scope.row.nodePod }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-form-item>
            </div>
            <el-form-item>
              <div style="justify-content: right; display: flex">
                <el-button
                  type="primary"
                  @click="addCluster"
                  class="el-button-primary-style"
                  >确定</el-button
                >
                <el-button
                  type="primary"
                  @click="closeUploadDialog"
                  class="el-button-primary-style"
                  >取消</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </div>
    <!-- 编辑按钮的弹窗显示 -->

    <div class="update-cluster">
      <el-drawer
        title="编辑分区信息"
        :visible.sync="updateDialogVisible"
        direction="rtl"
        size="50%"
        :before-close="beforeCloseUpdateDialog"
        :wrapperClosable="false"
        :with-header="true"
      >
        <div style="width: 100%; display: flex; justify-content: center">
          <el-form
            :model="updateInfo"
            :rules="updateRules"
            label-width="80px"
            ref="updateForm"
          >
            <el-form-item label="分区名称" prop="partitionZhname">
              <el-input
                v-model="updateInfo.partitionZhname"
                style="width: 300px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="分区描述" prop="partitionDescription">
              <el-input
                v-model="updateInfo.partitionDescription"
                placeholder="请输入长度小于512的字符"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 2 }"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <div>
              <span style="font-size: 20px; font-weight: bold">集群信息</span>
              <el-form-item label="所属集群" prop="clusterId">
                <el-select
                  v-model="updateInfo.clusterId"
                  filterable
                  placeholder="请选择一个集群"
                  @change="handleClusterChangeEdit"
                  disabeld
                >
                  <el-option
                    v-for="item in allClusterData"
                    :key="item.id"
                    :label="item.clusterZhname"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <div v-show="updateInfo.clusterId">
                  <el-table
                    :data="clusterNode"
                    style="width: 100%"
                    ref="updateTable"
                    @selection-change="handleUpdateSelection"
                  >
                    <el-table-column
                      type="selection"
                      width="55"
                    ></el-table-column>
                    <el-table-column
                      prop="nodeName"
                      label="节点名称"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="nodeAddress"
                      label="节点IP"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="nodeRole"
                      label="节点类型"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="nodeStatus"
                      label="节点状态"
                      width="100"
                    ></el-table-column>
                    <el-table-column label="CPU(核)" width="100">
                      <template slot-scope="scope">
                        {{ scope.row.nodeCpuUsed }} /
                        {{ scope.row.nodeCpuTotal }}
                      </template>
                    </el-table-column>
                    <el-table-column label="内存(GB)" width="100">
                      <template slot-scope="scope">
                        {{ scope.row.nodeMemoryUsed }} /
                        {{ scope.row.nodeMemoryTotal }}
                      </template>
                    </el-table-column>
                    <el-table-column label="POD(个)" width="100">
                      <template slot-scope="scope">
                        {{ scope.row.nodeUsedPod }} /
                        {{ scope.row.nodePod }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-form-item>
            </div>
            <el-form-item>
              <div style="justify-content: right; display: flex">
                <el-button
                  type="primary"
                  @click="updateCluster"
                  class="el-button-primary-style"
                  >确定</el-button
                >
                <el-button
                  type="primary"
                  @click="updateDialogVisible = false"
                  class="el-button-primary-style"
                  >取消</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
// import * as echarts from "echarts";
// import CreateTokenMethod from "@/views/cluster-manage/createTokenMethod.vue";

export default {
  name: "PartManage",
  // components: { CreateTokenMethod },
  data() {
    return {
      renderFlag: true,
      clusterNode: [],
      selectedNodes: [],
      searchInput: "",
      uploadDialogVisible: false,
      updateDialogVisible: false,
      chart: null,
      fileList: [],
      isRowSelected: false,
      tableData: [],
      mulipleSelection: [],
      filteredTableDate: [], //搜索结果
      allClusterData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      tmpPage: {
        filterKey: "",
        pageNum: 1,
        pageSize: 10,
      },
      filterPage: {
        filterKey: "aaa",
        pageNum: 1,
        pageSize: 10,
      },
      detail: {
        id: "",
      },
      uploadInfo: {
        partitionZhname: "",
        clusterId: "",
        partitionDescription: "",
        partitionHosts: [],
        clusterName: "",
      },
      updateInfo: {
        partitionZhname: "",
        clusterId: "",
        partitionDescription: "",
        partitionHosts: [],
        clusterName: "",
      },

      // 校验
      namePattern: /^[\u4E00-\u9FA5a-zA-Z0-9]{1,24}$/, // 中文名称，长度小于24
      descriptionPattern: /^.{0,128}$/, // 中文描述  长度小于128
      file: "",
      rules: {
        partitionZhname: [
          { required: true, message: "请输入分区名称", trigger: "blur" },
          {
            min: 2,
            max: 24,
            message: "长度在 2 到 24 个字符",
            trigger: ["blur", "change"],
          },
        ],
        PartitionDescription: [
          { required: true, message: "请输入分区描述", trigger: "blur" },
          {
            max: 512,
            message: "长度小于 512 个字符",
            trigger: ["blur", "change"],
          },
        ],
        partitionHosts: [
          { validator: this.validatePartitionHosts, trigger: "change" },
        ],
      },
      updateRules: {
        partitionZhname: [
          { required: true, message: "请输入分区名称", trigger: "blur" },
          {
            min: 2,
            max: 24,
            message: "长度在 2 到 24 个字符",
            trigger: ["blur", "change"],
          },
        ],

        partitionDescription: [
          { required: true, message: "请输入分区描述", trigger: "blur" },
          {
            max: 512,
            message: "长度小于 512 个字符",
            trigger: ["blur", "change"],
          },
        ],
        partitionHosts: [
          { validator: this.validatePartitionHosts, trigger: "change" },
        ],
      },
      clusterTableData: [],
      clusterTableData1: [],
      clusterPage: {
        pageSize: 3,
        currentPage: 1,
        total: 0,
      },

      isShowTooltip: false,
    };
  },
  methods: {
    onMouseOver(event) {
      const ev = event.target;
      const evWeight = ev.scrollWidth;
      const contentWidth = ev.clientWidth;
      if (evWeight > contentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    },
    // 分页获取所有分区，集群信息（添加编辑需要）
    getAllClusterByPage() {
      this.$clusterManageApi
        .getPartClusterList(this.tmpPage)
        .then((res) => {
          if (res && res.code === 200) {
            this.tableData = res.data.records;
            this.page.total = res.data.total;
            this.page.pageSize = res.data.pageSize;
            this.detail.id = res.data.records[0].id;
          }
        })
        .catch((error) => {
          console.error(error);
        });
      //获取集群信息
      this.$clusterManageApi
        .pageGetCluster({
          filterKey: "",
          pageSize: 1000,
          pageNum: 1,
        })
        .then((res) => {
          if (res && res.code === 200) {
            this.allClusterData = res.data.records;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 搜索过滤展示
    filterClusterList() {
      this.tmpPage.filterKey = this.searchInput;
      this.tmpPage.pageNum = 1;
      this.tmpPage.pageSize = 10;
      this.$clusterManageApi
        .searchPartition(this.tmpPage)
        .then((res) => {})
        .catch((error) => {
          this.$message.error("搜索失败：" + error.message);
          console.log(error.message);
        });
      this.getAllClusterByPage();
    },

    // 更换页数
    changePage(currentPage) {
      this.page.currentPage = currentPage;
      this.tmpPage.pageNum = currentPage;
      this.getAllClusterByPage();
    },
    // 更换页数
    changeClusterPage(currentPage) {
      this.clusterPage.currentPage = currentPage;
      this.clusterTableData = [
        ...this.clusterTableData1.slice((currentPage - 1) * 4, currentPage * 4),
      ];
    },

    addCluster() {
      // 检验输入内容是否匹配
      if (
        !this.namePattern.test(this.uploadInfo.partitionZhname) &&
        this.uploadInfo.partitionZhname !== ""
      ) {
        this.$message.error(
          "请输入正确格式的分区名称（中文、字母、数字且长度小于24）"
        );
        return;
      }

      if (
        !this.descriptionPattern.test(this.uploadInfo.partitionDescription) &&
        this.uploadInfo.partitionDescription !== ""
      ) {
        this.$message.error(
          "请输入正确格式的分区描述（中文名称且长度小于128）"
        );
        return;
      }
      if (this.uploadInfo.partitionHosts.length === 0) {
        this.$message.error("请选择分区节点");
        return;
      }
      //上传分区数据到后台
      this.$refs.uploadForm.validate((valid) => {
        if (valid) {
          this.$clusterManageApi
            .addPartCluster(this.uploadInfo)
            .then((res) => {
              if (res && res.code === 200) {
                this.$message.success("添加成功");

                this.getAllClusterByPage();
                this.uploadDialogVisible = false;
                // 清空数据

                this.selectedNodes = [];
                this.uploadInfo = {
                  partitionZhname: "",
                  clusterId: "",
                  partitionDescription: "",
                  partitionHosts: [],
                  clusterName: "",
                };
              }
            })
            .catch((error) => {
              this.$message.error("添加失败：" + error.message);
            });
        } else {
          this.$message.error("请检查数据");
          return false;
        }
      });
      // }
    },
    beforeCloseAddDialog(done) {
      this.uploadInfo = {
        partitionZhname: "",
        clusterId: "",
        partitionDescription: "",
        partitionHosts: [],
        clusterName: "",
      };
      this.selectedNodes = [];
      done();
    },
    beforeCloseUpdateDialog(done) {
      this.fileList = [];
      done();
    },

    //获取选中集群的节点信息
    selectClusterChange(id) {
      this.renderFlag = false;
      this.selectedNodes = [];
      this.uploadInfo.partitionHosts = [];
      this.$clusterManageApi.getClusterBasicinformationByid(id).then((res) => {
        this.renderFlag = true; // 重新开启渲染
        if (res && res.code === 200) {
          this.clusterTableData1 = [...res.data];
          this.clusterNode = this.clusterTableData1;

          // this.clusterPage.total = res.data.length;
        }
        this.clusterTableData = this.clusterTableData1.slice(
          0,
          this.clusterPage.pageSize
        );
        this.clusterPage.total = this.clusterTableData1.length;
      });
      //添加分区中的集群名称获取

      this.selectCluster = this.allClusterData.filter(
        (ele) => ele.id === id
      )[0];
      this.uploadInfo.clusterName = this.selectCluster.clusterName;

      this.remainingResourceInfo = {};
      // this.addTenantForm.clusterId = id;
    },

    //所属集群添加分区节点
    handleSelectionChange(selectedRows) {
      this.selectedNodes = selectedRows;
      this.uploadInfo.partitionHosts = selectedRows.map((node) => ({
        hostName: node.nodeName,
        hostIp: node.nodeAddress,
      }));
    },
    validatePartitionHosts(rule, value, callback) {
      if (this.uploadInfo.partitionHosts.length === 0) {
        callback(new Error("请选择分区节点"));
      } else {
        callback();
      }
    },

    //编辑分区节点
    handleUpdateSelection(selected) {
      this.selectedNodes = selected;
    },
    // 修改原来的selectClusterChangeEdit方法
    selectClusterChangeEdit(id, retainSelection = false) {
      this.$clusterManageApi.getClusterBasicinformationByid(id).then((res) => {
        if (res?.code === 200) {
          this.clusterNode = res.data;
          // 重置分页等数据
          this.clusterPage.currentPage = 1;

          // 清空选中状态（如果不需要保留选中状态）
          if (!retainSelection) {
            this.$refs.updateTable.clearSelection();
          }

          // 设置表格默认选中
          this.setTableSelection();
        }
      });
    },

    // 设置默认选中项
    setTableSelection() {
      this.$nextTick(() => {
        const currentNodes = this.updateInfo.partitionHosts.map(
          (h) => h.hostName
        );
        this.clusterNode.forEach((node) => {
          if (currentNodes.includes(node.nodeName)) {
            this.$refs.updateTable.toggleRowSelection(node, true);
          }
        });
      });
    },

    // 编辑分区
    editCluster(row) {
      this.updateDialogVisible = true;
      this.updateInfo = JSON.parse(JSON.stringify(row));
      // 初始化集群节点
      this.selectClusterChangeEdit(row.clusterId, true); // 保留选中状态
    },

    // 确定修改
    updateCluster() {
      const payload = {
        ...this.updateInfo,
        partitionHosts: this.selectedNodes.map((n) => ({
          hostName: n.nodeName,
          hostIp: n.nodeAddress,
        })),
      };

      this.$refs.updateForm.validate((valid) => {
        if (valid) {
          this.$clusterManageApi
            .updatePartitionInfo(payload)
            .then((res) => {
              if (res && res.code === 200) {
                // 清空输入框
                this.updateInfo = {
                  partitionZhname: "",
                  clusterId: "",
                  partitionDescription: "",
                  partitionHosts: [],
                  clusterName: "",
                };
                // 编辑保存成功后刷新页面
                this.getAllClusterByPage();
                this.closeUploadDialog();
                this.$message.success(res.data);
              }
            })
            .catch((error) => {
              this.$message.error("修改失败：" + error.message);
            });
        } else {
          this.$message.error("请检查数据");
          return false;
        }
      });
    },
    closeUploadDialog() {
      this.fileList = [];
      this.uploadDialogVisible = false;
      this.selectedNodes = [];
      this.updateDialogVisible = false;
      this.uploadInfo = {
        partitionZhname: "",
        clusterId: "",
        partitionDescription: "",
        partitionHosts: [],
        clusterName: "",
      };
    },

    // 选中数据 - 删除
    handleSelectionPart(val) {
      this.multipleSelection = val;
      this.isRowSelected = val.length > 0;
    },

    deleteSelectedRow() {
      this.$confirm("此操作将永久删除该, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const selectedRowsIds = this.multipleSelection.map((row) => row.id);
          this.$clusterManageApi
            .deletePartition(selectedRowsIds)
            .then((res) => {
              this.tableData = this.tableData.filter(
                (row) => !selectedRowsIds.includes(row.id)
              );
              this.multipleSelection = [];
              this.$message.success("删除成功");
            });
          // 清空选中的行
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击删除 - 删除
    deleteCluster(row) {
      const selectedRowId = [String(row.id)];
      // const selectedRowId = String(row.id); // 创建字符串数组并将 row.id 添加到数组中

      this.$clusterManageApi.deletePartition(selectedRowId).then((res) => {
        if (res && res.code === 200) {
          this.$message.success("删除成功");
          this.getAllClusterByPage();
        }
      });
    },
  },
  mounted() {
    this.getAllClusterByPage();
  },
};
</script>

<style scoped>
.cluster-detail {
  display: flex;
  justify-content: center;
  background-color: #d3e3fd;
  border: 1px solid #b8b4db;
  width: 90%;
  line-height: 30px;
  margin-left: 4%;
  margin-bottom: 10px;
}

.cluster-operate {
  background-color: #f9fbfd;
  /* border-radius:20px; */
  padding: 10px 0;
}

.keyword {
  color: #7d7575;
  font-weight: bold;
  margin-right: 5px;
  padding-left: 10px;
}

.cluster-info {
  margin-top: 10px;
  background-color: transparent;
}

.right-menu {
  display: inline;
  float: right;
  margin-right: 10px;
}

.delete-button {
  transition: opacity 0.5s ease; /* 使用 opacity 进行过渡，持续时间为 0.5 秒，缓动函数为 ease */
  opacity: 0; /* 初始状态为隐藏 */
}

.delete-button-show {
  opacity: 1; /* 显示状态 */
}

.cluster-table {
  /* width: 100%; */
  /* margin: 10px; */
  border: radius 40x;
  /* box-shadow: 1px 1px 9px #888888; */
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.upload {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.uploadDiv {
  padding-left: 14px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

::v-deep .el-input {
  width: 50%;
  margin-top: 4px;
  color: #7d7575;
}

::v-deep .el-table thead {
  font-size: initial;
  color: #606266;
  font-weight: 500;
}

::v-deep .el-image {
  margin-left: 20px;
}

::v-deep .el-input--suffix {
  width: 90%;
  margin-bottom: 5px;
  color: #7d7575;
}

::v-deep .el-button {
  border-radius: 30px;
  display: inline-block;
  margin: 0 8px;
}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 28px;
  color: #303133;
}

::v-deep .el-dialog {
  overflow: auto;
}

::v-deep .el-upload {
  display: block;
}

::v-deep .el-pagination__total {
  color: #7d7575;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #304156;
}
</style>

<style>
.tooltipClass {
  max-width: 300px;
}
</style>
